<template>
  <view class="course-assignment">
    <!-- 分配学习任务 -->
    <view class="assignment-item">
      <up-cell-group>
        <up-cell title="选择员工" :isLink="true" @click="showEmployeeSelect">
        </up-cell>
        <view class="py-24 px-24" v-if="selectedEmployeesText">
          <view class="selected-text" :class="{ 'placeholder': !selectedEmployees.length }">
            {{ selectedEmployeesText }}
          </view>
        </view>
      </up-cell-group>
    </view>
    <view class="assignment-item">
      <up-cell-group>
        <up-cell title="选择课程" :isLink="true" @click="showCourseSelect">
        </up-cell>
      </up-cell-group>
      <view class="py-24 px-24" v-if="selectedCoursesText">
        <view class="selected-text" :class="{ 'placeholder': !selectedCourses.length }">
          {{ selectedCoursesText }}
        </view>
      </view>
    </view>

    <u-popup :show="showEmployeePopup" @close="showEmployeePopup = false" mode="bottom" round="10">
      <view class="popup-content">
        <view class="flex justify-between items-center f-24 px-24 py-24">
            <view class="popupcancel" @click="showEmployeePopup = false">取消</view>
            <view class="popupTit">选择员工</view>
            <view class="popupconfirm" @click="confirmEmployeeSelection">确认</view>
        </view>
        <scroll-view scroll-y class="popup-scroll">
          <up-checkbox-group v-model="selectedEmployees">
            <view class="checkbox-item" v-for="employee in employees" :key="employee.shopStaffId">
              <up-checkbox :name="employee.shopStaffId" :label="employee.name" shape="circle"></up-checkbox>
            </view>
          </up-checkbox-group>
        </scroll-view>
      </view>
    </u-popup>

    <u-popup :show="showCoursePopup" @close="showCoursePopup = false" mode="bottom" round="10">
      <view class="popup-content">
        <view class="flex justify-between items-center f-24 px-24 py-24">
            <view class="popupcancel" @click="showCoursePopup = false">取消</view>
            <view class="popupTit">选择课程</view>
            <view class="popupconfirm" @click="confirmCourseSelection">确认</view>
        </view>
        <div class="py-12 px-24">
          <up-search placeholder="请输入课程" v-model="keyword" :show-action="false"></up-search>
        </div>
        <scroll-view scroll-y class="popup-scroll">
          <up-checkbox-group v-model="selectedCourses">
            <view class="checkbox-item" v-for="course in courses" :key="course.courseId">
              <up-checkbox :name="course.courseId" :label="course.name" shape="circle"></up-checkbox>
            </view>
          </up-checkbox-group>
        </scroll-view>
      </view>
    </u-popup>

    <view class="footer">
      <button class="assign-btn" @click="handleAssign" :disabled="loading">
        <up-loading-icon class="loading" color="#fff" size="16" :show="loading"></up-loading-icon>
        <text>分配</text>
      </button>
    </view>
  </view>
</template>

<script setup>
import { ref, computed } from 'vue'
import { studyApi,shopApi } from "@/api";
let keyword = ref('')
let employees = ref([])

let courses = ref([])
const loading = ref(false);
const showEmployeePopup = ref(false)
const showCoursePopup = ref(false)
const selectedEmployees = ref([])
const selectedCourses = ref([])

// Computed properties
const selectedEmployeesText = computed(() => {
  if (selectedEmployees.value.length === 0) return ''
  return employees.value
    .filter(emp => selectedEmployees.value.includes(emp.shopStaffId))
    .map(emp => emp.name)
    .join('，')
})

const selectedCoursesText = computed(() => {
  if (selectedCourses.value.length === 0) return ''
  return courses.value
    .filter(course => selectedCourses.value.includes(course.courseId))
    .map(course => course.name)
    .join('，')
})

const showEmployeeSelect = () => {
  showEmployeePopup.value = true
}

const showCourseSelect = () => {
  showCoursePopup.value = true
}

const confirmEmployeeSelection = () => {
  showEmployeePopup.value = false
}

const confirmCourseSelection = () => {
  showCoursePopup.value = false
}

const handleAssign = () => {
  if (selectedEmployees.value.length === 0) {
    uni.showToast({
      title: '请选择员工',
      icon: 'none'
    })
    return
  }
  if (selectedCourses.value.length === 0) {
    uni.showToast({
      title: '请选择课程',
      icon: 'none'
    })
    return
  }

  uni.showLoading({
    title: '分配中...'
  })
  let params={
    courseId: selectedCourses.value,
    shopStaffId: selectedEmployees.value
  }
  loading.value = true;
  studyApi.STUDYSAVESTAFFTASK(params).then((res) => {
    loading.value = false;
    if (res.code == 200) {
      uni.navigateBack();
    }else{
      uni.showToast({ title: res.errMsg, icon: "none" });
    }
  })

  // Simulate API call
  setTimeout(() => {
    uni.hideLoading()
    uni.showToast({
      title: '分配成功',
      icon: 'success'
    })
    // Reset selections
    selectedEmployees.value = []
    selectedCourses.value = []
  }, 1000)
}
//课程
const getCourseOrTaskListData = () => {
  let params={
    currentPage:1,
    isTaskCheck:false,
    pageSize:9999,
  }
  return studyApi.STUDYGETCOURSEORTASKLIST(params).then((res) => {
    if (res.code == 200) {
        courses.value = res.result.data
    } else {
      uni.showToast({ title: res.errMsg, icon: "none" });
    }
  })
}
//员工
function getShopStaffList() {
  let params = {
    currentPage: 1,
    pageSize: 9999
  }
  shopApi.SHOPGETSTAFFLIST(params).then((res) => {
    if (res.code == 200) {
      employees.value = res.result.data
    }else {
      uni.showToast({ title: res.errMsg, icon: "none" });
    }
  });
}

const getData = ()=>{
  let params={
    currentPage:1,
    pageSize:9999,
  }
  studyApi.STUDYGETSTAFFBYCOURSEID(params).then((res) => {
    if (res.code == 200) {
        courses.value = res.result.data
    } else {
      uni.showToast({ title: res.errMsg, icon: "none" });
    }
  })
}
onLoad((option) => {
  console.log("url参数", option);
  getCourseOrTaskListData()
  getShopStaffList()
});
</script>

<style lang="scss" scoped>
.course-assignment {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding-bottom: 120rpx;
  .assignment-item{
    background: #fff;
    margin-bottom: 24rpx;
  }
  .selected-text {
    font-size: 28rpx;
    color: #333;
    &.placeholder {
      color: #999;
    }
  }

  .popup-content {
    background-color: #fff;
    border-radius: 20rpx 20rpx 0 0;
    max-height: 80vh;
    display: flex;
    flex-direction: column;

    .popup-header {
      padding: 30rpx;
      box-sizing: border-box;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 2rpx solid #f5f5f5;

      text {
        font-size: 32rpx;
        font-weight: bold;
      }
    }

    .popupcancel{
        font-family: PingFang SC;
        font-size: 14px;
        font-weight: 400;
        line-height: 22px;
        text-align: left;
        color: rgba(0, 0, 0, 0.9);
    }
    .popupconfirm{
        font-family: PingFang SC;
        font-size: 14px;
        font-weight: 600;
        line-height: 22px;
        text-align: right;
        color: rgba(193, 122, 50, 1)
    }
    .popupTit{
        font-family: PingFang SC;
        font-size: 18px;
        font-weight: 600;
        line-height: 26px;
        text-align: right;
        color:rgba(0, 0, 0, 0.9);
    }

    .popup-scroll {
      max-height: 60vh;
      padding: 20rpx;
      box-sizing: border-box;
      display: flex;
      flex-wrap: wrap;
    }

    .checkbox-item {
      width: 100%;
      padding: 20rpx;
      box-sizing: border-box;
      border-bottom: 2rpx solid #f5f5f5;

      &:last-child {
        border-bottom: none;
      }
    }
  }

  .footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 20rpx;
    box-sizing: border-box;
    background-color: #fff;
    box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);

    .assign-btn {
      width: 100%;
      height: 80rpx;
      line-height: 80rpx;
      background-color: #c4996c;
      color: #fff;
      border: none;
      border-radius: 40rpx;
      font-size: 32rpx;
      display: flex;
      justify-content: center;
      &:active {
        opacity: 0.9;
      }
    }
  }
}
</style>